<template>
 <div>
 
<el-table 
      :data="tableData"
      :border='border'
      :width="width"
     
       
     :default-sort = "{prop: 'date', order: 'descending'}"
      @selection-change="handleSelectionChange"
 >
 <!-- 多选 -->
<el-table-column type="selection"  width="55"></el-table-column>
<el-table-column type="index"  width="55" label='序号'></el-table-column>
<template v-for="(item,index) in tableColum">
<!-- switch列 -->
<el-table-column :key="index"  width="80" v-if='item.type==="switch"' :label='item.lable'  :prop='item.prop' >
<template slot-scope="scope">
    <el-switch v-model="scope.row.prop" @change='switchChang(scope.row)' />
</template>

</el-table-column>
<!-- 图片列 -->
 <el-table-column  v-else-if='item.type==="img"'  :key="item.id"  :label='item.lable'  :prop='item.prop'>
  <template  slot-scope="scope">
   <!-- <span>{{item}}</span> -->
    <el-image style="width: 100px; height: 100px" :src="item.prop"  />
  </template>
 

 </el-table-column>
  <!-- 操作列1 -->
  <el-table-column  v-else-if='item.type==="opt"' width="300"  :key="item.label"  :label='item.lable'  :prop='item.prop'>

  <template   slot-scope="scope">
  <!-- 操作链接 -->
   <el-link 
   
   :size='item.size'
   :type='operation.type'
    v-for='(operation,index) in item.operations' 
    :key="index"
    @click="rowoperation(scope.row,operation.method)"
    >{{operation.label}}</el-link>
  </template>
 

 </el-table-column>
  <!-- 操作列2 按钮  optBut-->
  

  <el-table-column  v-else-if='item.type==="optBut"' width="300"    :label='item.lable'  :prop='item.prop'>

    <template   slot-scope="scope">
    <!-- 操作链接 -->
     <el-button
     
     
     :size='item.size'
     :type='operation.type'
      v-for='(operation,index) in item.operations' 
      :key="index"
      @click="rowoperation(scope.row,operation.method)"
      >{{operation.label}}</el-button>
    </template>
   
  
   </el-table-column>


  <!--  -->
  <!-- 时间列 -->
     <el-table-column   v-else-if='item.type==="data"'  sortable :key="item.lable"  :label='item.lable' :prop='item.prop'>
        <template slot-scope="scope">
            <!-- 使用了时间过滤器 -->
            {{ scope.row.timeOfEntry | dateFormat }}
          </template>
     </el-table-column>
     <!-- change  -->
     <!-- v-if='item.prop===item.data.value' -->
     <!-- 1审批中；2审批通过；3审批不通过；4撤销 -->
       <el-table-column 
       
         v-else-if='item.type==="change"'  sortable  :key="item"  :label='item.lable' >
        <template slot-scope="scope">
            <el-tag v-if="scope.row.processState === '1'">审批中</el-tag>
            <el-tag type="success" v-else-if="scope.row.processState=== '2'"
              >审批通过</el-tag
            >
              <el-tag type="success" v-else-if="scope.row.processState === '3'"
              >审批不通过</el-tag
            >
            <el-tag type="info" v-else-if="scope.row.processState === '4'">撤销</el-tag>
          </template>
     </el-table-column>
<!-- 普通列 -->
    <el-table-column  v-else   sortable   :label='item.lable'  :prop='item.prop'></el-table-column>
   
</template>



</el-table>
 
 </div>
</template>

<script>
export default {
    props:{
        tableData:{
            type:Array,
            default:[]
        },
        border:{
            type:Boolean,
            default:false
        },
        tableColum:{
            type:Array,
            default:[]
        },
        multipleSelection:{
            type:Array,
            default:[]
        },
        width:{
            type:String,
            default:'width:100%'
        }
    },
data() {
    return {
     multipleSelectionObj:this.multipleSelection
    }
},
methods: {
    // 按钮操作事件
    rowoperation(row,method){
    console.log(row,method)
    this.$emit('rowoperation',row,method)
    },
// 复选框选择时间
      handleSelectionChange(val) {
        // vue2中子组件不能直接修改props的值
         this.multipleSelectionObj = val;
         console.log('子组件',val)
         this.$emit('handleSelectionChange',val)
      },
// switch开关事件
    switchChang(val){
    console.log(val)
     this.$emit('switchChang',val)
    }
},
}
</script>

<style>
.el-table{
    padding: 20px;
    width: 100%;
    
   
}
.el-link{
    padding: 0 5px;
}
</style>